<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div>
       <el-form :inline="true"
               :model="dataForm"
             >
        <el-form-item>
          <select-organization-input @resetSearch="organizationChange" @change="organizationChange" />
        </el-form-item>
        <el-form-item>
          <select-user-id-input @resetSearch="userChange" />
        </el-form-item>
        <el-form-item>
            <ejs-daterangepicker :placeholder="$t('custom.marketbot.attenddanceidlereport.search_changedTimeRange')" style="width:200px;"
            :format="dateRangeDefaultSetting.format" v-model="dataForm.searchDate" @change="query" :strictMode="dateRangeDefaultSetting.selectionMode"
            >
            <e-presets>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')" :start='dateRangeDefaultSetting.weekStartDate' :end='dateRangeDefaultSetting.weekEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')" :start='dateRangeDefaultSetting.monthStartDate' :end='dateRangeDefaultSetting.monthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')" :start='dateRangeDefaultSetting.lastMonthStartDate' :end='dateRangeDefaultSetting.lastMonthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')" :start='dateRangeDefaultSetting.lastYearStartDate' :end='dateRangeDefaultSetting.lastYearEndDate'></e-preset>
            </e-presets>
            </ejs-daterangepicker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.ticketNumber"
                    @change="ticketNumberChange"
                    :placeholder="$t('custom.marketbot.attenddanceidlereport.search_ticketNumber')"
                    clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="control-section">
      <div class="content-wrapper" v-loading="loading">
      <ejs-grid :dataSource="gridDefaultSetting.dataSource"
                :allowResizing='gridDefaultSetting.allowResizing'
                :allowFiltering='gridDefaultSetting.allowFiltering'
                :filterSettings='gridDefaultSetting.filterSettings'
                :allowGrouping='gridDefaultSetting.allowGrouping'
                :allowPaging='gridDefaultSetting.allowPaging'
                :toolbar="gridDefaultSetting.toolbar"
                :allowTextWrap="gridDefaultSetting.allowTextWrap"
                :showColumnChooser='gridDefaultSetting.showColumnChooser'
                :allowReordering='gridDefaultSetting.allowReordering'
                :allowSorting='gridDefaultSetting.allowSorting'
                :load="load"
                ref="datagrid"
                >
        <e-columns>
          <e-column field='userName'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.userName')"
                    width='200'>
                    </e-column>
          <e-column field='ticketNumber'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.ticketNumber')"
                    width='200'>
                    </e-column>
          <e-column field='currentTicketStatus'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.currentTicketStatus')"
                    width='200'
                    ></e-column>
          <e-column field='fromTicketStatus'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.fromTicketStatus')"
                    width='200'
                    ></e-column>
          <e-column field='priority'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.priority')"
                    width='200'
                    ></e-column>
          <e-column field='changedTime'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.changedTime')"
                    width='200'
                    :template="changedTimeFormat"
                    ></e-column>
          <e-column field='syncTime'
                    :headerText="$t('custom.marketbot.attenddanceidlereport.syncTime')"
                    width='200'
                    :template="syncTimeFormat"
                    ></e-column>
        </e-columns>
      </ejs-grid>
      <el-pagination background
                      :layout="pageOptions.layout"
                      @current-change="pageCurrentChangeHandle"
                      @size-change="pageSizeChangeHandle"
                      :page-sizes="$store.state.app.pageOptions.pageSizes"
                      :pager-count="$store.state.app.pageOptions.pageCount"
                      :current-page="pageOptions.currentPage"
                      :total="pageOptions.total">
      </el-pagination>
      </div>
    </div>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/simplereport-view-module'
import SelectUserIdInput from '@/components/search-input/select-user-id-input'
import SelectOrganizationInput from '@/components/search-input/select-organization-input'
import ChangedTimeFormat from '@/components/grid-format/ChangedTimeFormat.vue'
import SyncTimeFormat from '@/components/grid-format/SyncTimeFormat.vue'
import moment from 'moment'

export default {
  mixins: [mixinViewModule],
  components: { SelectUserIdInput, SelectOrganizationInput },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: 'idle-time-report'
      },
      changedTimeFormat: function () {
        return { template: ChangedTimeFormat }
      },
      syncTimeFormat: function () {
        return { template: SyncTimeFormat }
      },
      dataForm: {
        userId: null,
        searchDate: null,
        ticketStatus: null,
        ticketNumber: null
      }
    }
  },

  methods: {
    resetDataForm () {
      this.dataForm.searchDate = [this.dateRangeDefaultSetting.weekStartDate, this.dateRangeDefaultSetting.weekEndDate]
    },
    organizationChange (e) {
      this.dataForm.selectedOrganization = e
      this.query()
    },
    load (item) {
      this.grid = item
      this.query()
    },
    getDataListAPI () {
      var _self = this
      const params = {
        ...this.dataForm,
        tenantCode: this.$store.state.user.tenantCode,
        deptIds: this.dataForm.selectedOrganization
      }

      // validate dataform before query
      if (_self.dataForm) {
        if (_self.dataForm.searchDate && _self.dataForm.searchDate.length >= 2) {
          params.startTime = moment(_self.dataForm.searchDate[0]).utc().format()
          params.endTime = moment(_self.dataForm.searchDate[1]).utc().format()
        } else {
          delete params.startTime
          delete params.endTime
        }
      }

      return this.$interface.attendance.getAttendanceIdelReport(params)
    },
    userChange (e) {
      this.dataForm.userId = e
      this.query()
    },
    ticketNumberChange (e) {
      this.query()
    }
  }
}
</script>
<style scoped>
.e-custom-class {
  text-decoration: underline;
}

.e-custom-class:hover {
  color: red;
  text-decoration: none;
}
</style>
